<template>
	<div>
		<!--组件-->
		<torder></torder>
		<div class="htotal">
			<div class="horder">
				<div class="hwrite">
					<div class="htexta">
						<div class="inlineB Laddress container">
							<span>
								<span class="hfontSize">用户名: </span>
								<span class="hfontSize">{{phone}}</span>
							</span>
							<br />
							<em class="default">默认</em>
							<span class="Raddress">{{place}}</span>
						</div>
					</div>
					<span class="position num1"><a href="#/dizhi" class="iconfont icon-lunboyoufangun "></a></span>
					
				</div>
				<div class="horder_infro container">
					<a href="#/Dianinfro">
						
						<img :src="'static/wine'+src" class="order_img"/>
					</a>	
					<div class="container hB">
						<span class="hgood_title">{{goods}}</span>		
						<span class="hgood_title">{{type}}</span>
					
					</div>
					<div class="horder_num submit_price">
					<br />
					<span >X{{num}}</span>
					<a href="javascript:void(0)" class="iconfont icon-lunboyoufangun position"></a>
					</div>
				</div>
				<div class="hpay horder_common horder_border">
					<span class="hflighter">支付方式: {{text}}</span>
					<span class="horder_num position">在线支付<a href="#/zhifufangshi" class="iconfont icon-lunboyoufangun"></a></span>
				</div>
				<div class="hdistribute horder_common container horder_border">
					<span class="hflighter" style="padding-left: 0.6rem;">配送方式</span>
					<span class="horder_num position"><div class="container"><div style="display: inline-block;">普通快递<br />时间不限</div><a href="javascript:void(0)" class="iconfont icon-lunboyoufangun "></a></div></span>
				</div>
				<div class="hdistribute horder_common container">
					<span class="hflighter" style="padding-left: 0.6rem;">发票信息</span>
					<span class="horder_num position"><div class="container"><div style="display: inline-block;">普通发票<br />个人<br />明细</div><a href="javascript:void(0)" class="iconfont icon-lunboyoufangun "></a></div></span>
				</div>
				<div class="note_infro">
					<div class="note">备注</div>
					<div class="note_kuang">45字以内</div>
					
				</div>
				<div class="hdistribute horder_common container">
					<span class="hflighter" style="padding-left: 0.6rem;display: inline-block;">商品总计<br />运费</span>
					<span class="horder_num position"><div class="container"><div style="display: inline-block;">¥{{price}}<br />¥8.00</div></div></span>
				</div>
				<div class="submit">
					<div class="submit_right">
						<span>应付金额:<span class="horder_price">¥{{muchMoney}}</span></span>
						<div class="submit_order">
							<a href="#/zhifu">提交订单</a>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	
</template>

<script>
	import torder from './torder.vue'
	
	export default{
		name:"Pworder",
		data(){
			return {
				num:"",
				place:'',
				src:"",
				goods:"",
				type:'',
				phone:'',
				price:'',
				text:'',
				muchMoney:''
			}
		},
		components:{
			torder
		},
		computed:{
			shopping(){
				return this.$store.state.shopping;
			},
			txt(){
				return this.$store.state.txt;
			}
		},
		mounted(){
			var shopping = this.$store.state.shopping[this.$store.state.shopping.length-1];
			var src = shopping[0];
			var imgstr = src.substr(16) ;
			this.src = imgstr;
			this.goods = shopping[1];
			this.type  = shopping[2];
			this.num   = shopping[3];
			this.place = shopping[4];
			this.price = shopping[5]* this.num;
			//总金额
			this.muchMoney = this.price +8;
			this.$store.commit('muchMoney',this.muchMoney);
			//手机号
			var obj = localStorage.obj;
			var arr = JSON.parse(obj);
			var phone = arr[0].phone;
			this.phone = phone.replace(phone.substr(3,4),'****');
			//支付方式
			var txt = this.$store.state.txt[this.$store.state.txt.length-1];
			this.text = txt;
		}
	}
	
	
</script>

<style scoped>
	.horder{width: 100%;position: relative;}
	.hwrite{width: 100%;text-align: center;}
	/*地址部分*/
	.htexta{width:28rem; height: 5rem;background: rgba(255,255,255,1);resize: none;outline: none;padding: 1.5rem 0;}
	.Laddress{width:92%;text-align: left;padding-left: 0.6rem;}
	.default{color: red;border: 1px solid red;font-style: normal;font-size: 0.8rem;}
	.hfontSize{font-size: 1.4rem;}
	.Raddress{font-size: 1.2rem;}
	/*.hwrite textarea[placeholder]{line-height: 8rem;font-size: 1.2rem;padding-left: 1rem;right: 1rem;}*/
	
	.position{position:absolute;right: 1rem;color: grey; text-decoration: none;}
	.position a{text-decoration: none;color: grey;}
	.num1{top: 3.4rem;}
	.horder_num{font-size: 1.2rem;text-align: right;text-decoration: none;}
	.horder_infro{width: 90%;height: 6rem;/*line-height:6rem;*/padding-left: 0.6rem;border-top: 0.6rem solid #f4f4f4;border-bottom: 0.6rem solid #f4f4f4;background: rgba(255,255,255,1);}
	
	.hgood_title{width: 15rem;display: block;word-break: keep-all;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	.submit_price{width: 5rem;padding-left:3.2rem;}
	.order_img{width: 3.5rem;height: 3.5rem;margin-right:1rem ;vertical-align: middle;}
	.hpay{height: 4rem;line-height:4rem;}
	/*公共样式*/
	.horder_common{width: 90%;padding-left: 0.6rem;background: rgba(255,255,255,1);}
	/*下划线*/
	.horder_border{border-bottom: 1px solid rgba(178,178,178,0.5);}
	.hflighter{font-size: 1.3rem; color: #b2b2b2;}
	.hdistribute{height: 4rem;padding: 1rem 0;}
	.container{display: flex;align-items: center;}
	.note_infro{width: 90%;height: 5rem;border-top: 0.6rem solid #f4f4f4;border-bottom: 0.6rem solid #f4f4f4;background: rgba(255,255,255,1);font-size: 1.3rem; color: #b2b2b2;padding: 0.5rem 0 1rem 0.6rem;}
	.note{height: 2rem;}
	.note_kuang{width: 95%; height: 3rem;line-height: 3rem;border: 1px solid rgba(178,178,178,0.5);padding-left: 0.5rem;}
	.submit{width: 90%;height: 4.5rem;line-height: 4.5rem;background: rgba(249,249,249,1);font-size:1.4rem;position: relative;}
	.submit_right{position:absolute;right: -2.5rem;margin-bottom: 3rem;}
	.horder_price{color: #b91b34; margin-right: 1rem;}
	.submit_order{background: rgba(185,27,52,1);color: white;width: 8rem;text-align: center;display: inline-block;font-weight: 100; float: right;}
	.submit_order a{color: white; text-decoration: none;}
	.inlineB{display: inline-block;}
	.hB{display: block;}
	.color{color: red;}
	
</style>